<!DOCTYPE html>
<!--代码由www.magicalcoder.com可视化布局器拖拽生成 资源请自行下载到本地-->
<head><meta charset="UTF-8">
	<meta charset="UTF-8">

	<!--BootStrap设计的页面支持响应式的 -->

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- 引入主题  -->

	<link href="bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />

	<!-- 引入bootstrap的css -->

	<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />

	<!-- 引入jquery的js  因为bootstrap使用到jquery的js -->

	<script src="js/jquery-3.3.1.min.js"></script>
	<!--    进度条-->
	<link rel="stylesheet" href="blue/pace-theme-corner-indicator.css">
	<script src="js/pace.js"></script>
	<!-- 引入bootsrap的js -->

	<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
	<!--    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
	<title>订单列表</title>
	<!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>-->
	<link href="http://www.magicalcoder.com/magicaldrag/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.css" rel="stylesheet"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.3/json3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/extension/dataTool.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
	<!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>-->
	<script src="http://www.magicalcoder.com/assets/js/common.js"></script>
	<script src="http://www.magicalcoder.com/magicaldrag/assets/drag/ui/magicalcoder/1.1.0/magicalcoder.js"></script>
	<style>
		.xiaotaoobject {
			height: 140px;
			width: 140px;
			object-fit: contain;
		} body{
			  background-image: url("images/背景.jpg");
		  }
	</style>
</head>
<body class="layui-form" style="background-color:#eee;padding: 20px;" >
	<div class="row clearfix">
		<div class="col-md-6 column">
			<div class="row clearfix">
				<div class="col-md-6 column">
					<img alt="小淘图标" class="xiaotaoobject"  src="images/order_a.jpg" />
				</div>
				<div class="col-md-6 column">
					<div class="page-header">
						<h1>
							小淘商城<p><small>2020最新潮流</small></p>
						</h1>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6 column">
			<ul class="breadcrumb">
				<li>
					<a href="#">商家中心</a>
				</li>
				<li class="active">
					我的订单
				</li>
			</ul>
			<blockquote>
				<p >
                    <span class="glyphicon glyphicon-bell">
                    小淘为每一个成功订单感到开心！
                    </span>
				</p> <small> <cite>小淘寄语</cite></small>
			</blockquote>
		</div>
	</div>
	<div class="col-sm-12">
		<table class="table">
			<thead>
			<tr><th style="width: 12.6459%;">商品图片</th><th style="width: 16.5243%;">商品名</th><th style="width: 8.427%;">数量</th><th style="width: 11.5233%;">单价（元）</th><th style="width: 13.1877%;">优惠（元）</th><th style="width: 10.302%;">状态</th><th style="width: 8.79785%;">邮费</th><th>实付金额（元）</th></tr>
			</thead>
			<tbody>
			<tr><td class="mc-ui-flex-center"><img class="img-fluid" style="width: 93.9189%; height: 91px;" src="images/1.jpg" /></td><td>华为手机</td><td>2</td><td>5500</td><td>500</td><td>已完成</td><td>0</td><td>10500</td></tr>
			</tbody>
		</table>
	</div>
	<div class="col-sm-12">
		<div class="row">
			<div class="col-sm-6">
				<button class="btn btn-primary" type="button">删除订单</button>
			</div>
			<div class="col-sm-6">
				<button class="btn btn-primary" type="button">查看详情</button>
			</div>
		</div>
	</div>
	<div class="col-sm-12">
		订单号：
	</div>
	<div class="col-sm-12">
		邮寄地址：
	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<table class="table">
			<thead>
			<tr><th style="width: 12.6459%;">商品图片</th><th style="width: 16.5243%;">商品名</th><th style="width: 8.427%;">数量</th><th style="width: 11.5233%;">单价（元）</th><th style="width: 13.1877%;">优惠（元）</th><th style="width: 10.302%;">状态</th><th style="width: 8.79785%;">邮费</th><th>实付金额（元）</th></tr>
			</thead>
			<tbody>
			<tr><td class="mc-ui-flex-center"><img class="img-fluid" style="width: 93.9189%; height: 91px;" src="images/2.jpg" /></td><td>华为手机</td><td>2</td><td>5500</td><td>500</td><td>已完成</td><td>0</td><td>10500</td></tr>
			</tbody>
		</table>
	</div>
	<div class="col-sm-12">
		<div class="row">
			<div class="col-sm-6">
				<button class="btn btn-primary" type="button">删除订单</button>
			</div>
			<div class="col-sm-6">
				<button class="btn btn-primary" type="button">查看详情</button>
			</div>
		</div>
	</div>
	<div class="col-sm-12">
		订单号：
	</div>
	<div class="col-sm-12">
		邮寄地址：
	</div>
</div>
<script>
	//以下脚本为标签属性转换成layui组件的还原过程
	//调试:打开浏览器控制台(F12),在代码中某行增加 debugger 即可调试
	//echarts自动初始化
	new McECharts().render();

</script>
</body>
</html>
